<template>
  <el-container class="container">
    <el-aside width="250px">
      <div class="title">水稻病害智能化检测系统</div>
      <UserAside></UserAside>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <UserHeader></UserHeader>
      </el-header>

      <el-main>
        <UserMain></UserMain>
      </el-main>
    </el-container>


  </el-container>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import UserAside from "@/components/userView/UserAside.vue";
import UserHeader from "@/components/userView/UserHeader.vue";
import UserMain from "@/components/userView/UserMain.vue";
import {ElNotification} from "element-plus";
import request from "@/utils/request";

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
//每次记录当前预警信息发布时间，本地和最新的不一样则说明发布了新预警信息
let oldPublicTime = ref("")

//初始化时预警一次
onMounted(()=>{
  //每15秒查询一次预警信息
  setInterval(cycleGetWarningSystem, 1000 * 15)

  cycleAutoGetWarningSystem()
})

//定时查询管理员手动发布的预警信息
function cycleGetWarningSystem(){
  request.get("http://localhost:8090/warningSystem/getWarningSystemByProvince")
      .then(res=>{
        if(res.data.code === 200 && res.data.data.publicTime !== oldPublicTime.value){
          oldPublicTime.value = res.data.data.publicTime
          ElNotification({
            title:"警告",
            message: res.data.data.info,
            type: 'warning',
          })
        }
      })
      .catch(err=>{
        console.log(err)
      })
}

//定时查询系统自动发布的预警信息
function cycleAutoGetWarningSystem(){
  request.get("http://localhost:8090/user/getAutoWarningInfo")
      .then(res=>{
        if(res.data.code === 200){
          let info = res.data.data
          if(info.length > 0){
            if(info[0].ruid === info[0].suid){
              ElNotification({
                title:"警告",
                message: "您的稻田近期患病数量偏高，请注意防范",
                type: 'warning',
              })
            }
            else{
              ElNotification({
                title:"警告",
                message: "距您"+(info[0].distance).toFixed(2)+"公里的稻田近期患病数量偏高，请注意防范",
                type: 'warning',
              })
            }
          }
        }
      })
      .catch(err=>{
        console.log(err)
      })
}


</script>

<style scoped>

.container {
  height: 100%;
}

.title {
  width: 100%;
  height: 60px;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray;
}

.el-header {
  color: black;
  position: relative;
  background-color: white;
  border-top-right-radius: 20px;
}
.el-aside {
  background-color: white;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border:2px #f1f3f7 solid;
}
.el-menu {
  border-right: none;
}
.el-main {
  padding: 0;
  background-color: #eeefef;
  border-bottom-right-radius: 20px;
}

</style>